<template>
  <div class="">
    <!-- <el-row class="header" style="height: 25px; color: white">
      <el-col :span="12">LOL手游 — 比赛记录分析</el-col>
      <el-col :span="12"></el-col>
    </el-row> -->
    <el-row>
      <el-col :span="4">
        <el-menu
          default-active="/records"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="/records">
            <i class="el-icon-document"></i>
            <span slot="title">比赛记录</span>
          </el-menu-item>
          <el-menu-item index="/analysis">
            <i class="el-icon-data-analysis"></i>
            <span slot="title">数据分析</span>
          </el-menu-item>
          <el-menu-item index="/teams">
            <i class="el-icon-tickets"></i>
            <span slot="title">赛队管理</span>
          </el-menu-item>
          <el-menu-item index="/heros">
            <i class="el-icon-user"></i>
            <span slot="title">英雄管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" style="">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  data() {
    return {
      // form: {}
    };
  },
  created() {
    this.$router.replace('/records');
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.replace(key);
      // this.$db.find({ age: 30 }, (err, docs) => {
      //   if (err) {
      //     console.log(err);
      //     return;
      //   }
      //   console.log("docs: ", docs);
      // });    // 测试数据库是否好使
    },
  },
};
</script>

<style>
.header {
  background-color: #409eff;
}
</style>
